<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="icon" href="./favicon.ico"/>
  <title>Bookmark Manager</title>
  <link rel="stylesheet" href="./css/styles.css">
</head>
<style>
  :root {
    --color: #1E1F22;
    --bg-color: #F7F8FA;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --color: #F7F8FA;
      --bg-color: #1E1F22;
      --a-href-color: #F7F8FA;
    }
  }
  body {
    color: var(--color);
    background-color: var(--bg-color);
  }
  body, html {
    /*font-family: SF Pro Display, -apple-system, BlinkMacSystemFont, Segoe Ul, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;*/
    font-family: "SF Pro SC", "SF Pro Text", "SF Pro Icons", "PingFang SC", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size: 16px;
    margin: 0;
    min-height: unset;
    min-width: unset;
    padding: 0;
  }
  a:link {
    color: var(--a-href-color);
  }
  a:visited {
    /*color: rgb(79, 79, 224);*/
    color: var(--a-href-color);
    text-decoration: none;
  }
</style>
<body>
<div class="nav">
  <a class="link_nav" id="go-root" href="#">返回根级</a>
  <a class="link_nav" id="go-back" href="#">返回上级</a>
  <a class="link_nav" href="#">添加书签</a>
  <a class="link_nav" href="#">删除书签</a>
  <a class="link_nav" target="_blank" href="./data/json/Bookmarks.json">编辑书签</a>
  <a class="link_nav" target="_blank" href="./some-text.html">SomeTextHtml</a>
  <a class="link_nav" target="_blank" href="./SomeText.md">SomeTextMd</a>
  <a class="link_nav" href="#" id="btnChangeToLightTheme">🌞</a>
  <a class="link_nav" href="#" id="btnChangeToDarkTheme">🌜</a>
</div>
<div id="container"></div>
<div id="paramDisplay"></div>
<div class="nav-tips">
  <p id="nav-tips-content-fixed"></p>
  <p id="nav-tips-content"></p>
</div>
<script src="./js/script.js"></script>
<script src="../../js/zch/getUrlParam.js"></script>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    monitorSystemThemeChange();
    addEventListenerToThemeChangeBtn();
    addEventListenerToBookmarkNavBtn();
    getCurrentUrlParam();
    //
  })
  function monitorSystemThemeChange() {
    const mediaQueryListDark = window.matchMedia('(prefers-color-scheme:dark)');
    console.info('mediaQueryListDark:', mediaQueryListDark);
    mediaQueryListDark.addEventListener('change', handleChange);
    // 检查localStorage 中的偏好设置
    const savedTheme = localStorage.getItem('theme');
    console.info('savedTheme:', savedTheme, typeof savedTheme);
    if (savedTheme) {
      changeTheme(savedTheme, false);
    }
    else {
      // 第一次没有用户自定义主题时，根据系统主题变化
      console.info('根据系统主题变化')
      handleChange(mediaQueryListDark);
    }
  }
  function addEventListenerToThemeChangeBtn() {
    // 获取按钮
    const darkThemeBtn = document.getElementById('btnChangeToDarkTheme');
    const lightThemeBtn = document.getElementById('btnChangeToLightTheme');
    // 为按钮添加事件监听器
    darkThemeBtn.addEventListener('click', function () {
      changeTheme('dark', true);
    });
    lightThemeBtn.addEventListener('click', function () {
      changeTheme('light', true);
    });
  }
  function handleChange(mediaQueryListEvent) {
    if (mediaQueryListEvent.matches) {
      changeTheme('dark', false);
    }
    else {
      changeTheme('light', false);
    }
  }
  function changeTheme(theme, isUserInitiated) {
    if (theme === 'dark') {
      document.documentElement.style.setProperty('--color', '#F7F8FA');
      document.documentElement.style.setProperty('--bg-color', '#1E1F22');
      changeALinkColor('#F7F8FA');
    }
    else {
      document.documentElement.style.setProperty('--color', '#1E1F22');
      document.documentElement.style.setProperty('--bg-color', '#F7F8FA');
      changeALinkColor('#1E1F22');
    }
    if (isUserInitiated) {
      // 如果是用户切换主题, 则保存到localstorage
      localStorage.setItem('theme', theme);
    }
  }
  function changeALinkColor(color) {
    document.documentElement.style.setProperty('--a-href-color', color);
  }
  function getCurrentUrlParam() {
    // 调用函数获取参数
    const urlJsonParams = getUrlParamsToJson();

    if (urlJsonParams && urlJsonParams.name) {
      loadBookmarkData(urlJsonParams.name);
      return;
    }
    console.log('urlParams:', urlJsonParams, typeof urlJsonParams);
    console.log('urlParamsData:', urlJsonParams.name);
    // 显示参数
    for (const [key, value] of Object.entries(urlJsonParams)) {
      // p.textContent = `${key}: ${JSON.stringify(value)}`;
      // console.log('urlParams2:', `${key}`, `${JSON.stringify(value)}`);
      // console.log('urlParams3:', `${key}`, `${value}`);
      console.log('urlParams1:', key, value);
    }
    loadBookmarkData("all");
    // alert('urlJsonParams.data is null' + urlJsonParams)
    console.error('urlJsonParams.data is null:', urlJsonParams);
  }
  function addEventListenerToBookmarkNavBtn() {
    document.getElementById("go-back").addEventListener("click", (event) => {
      event.preventDefault();
      goBack("container");
    });
    document.getElementById("go-root").addEventListener("click", (event) => {
      event.preventDefault();
      loadBookmarkData();
    });
  }
</script>
</body>
</html>
